<template>
	<view class="cmd-result-page">
		<image class="cmd-result-page-image" :src="setSrc" mode="aspectFit"></image>
		<view class="cmd-result-page-text">{{setText}}</view>
		<view class="cmd-result-page-subtext">{{setSubText}}</view>
		<view v-if="defBtn || warnBtn || priBtn" class="cmd-result-page-buttons">
			<button v-if="defBtn" @tap="$_defBtn" class="button" type="default" plain="true" size="mini">{{defBtn}}</button>
			<button v-if="warnBtn" @tap="$_warnBtn" class="button" type="warn" plain="true" size="mini">{{warnBtn}}</button>
			<button v-if="priBtn" @tap="$_priBtn" class="button" type="primary" plain="true" size="mini">{{priBtn}}</button>
		</view>
	</view>
</template>

<script>
	/**  
	 * 结果页组件  
	 * @description 在整张页面中组织插画、图标、文字等内容，向用户反馈操作结果。  
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=203  
	 * @property {String} src 图片资源地址 - 支持相对路径、绝对路径，支持 base64 码  
	 * @property {String} text 主文案  
	 * @property {String} subtext 副文案  
	 * @property {String} type 结果页 - 默认empty，支持 页面丢失-lost 网络异常-network 无信息-empty  
	 * @property {String} def-btn 显示普通按钮 - def-btn="普通按钮"  
	 * @property {String} warn-btn 显示警告按钮 - warn-btn="警告按钮"  
	 * @property {String} pri-btn 显示高亮按钮 - pri-btn="高亮按钮"  
	 * @event {Function} defBtn 普通按钮点击事件  
	 * @event {Function} warnBtn 警告按钮点击事件  
	 * @event {Function} priBtn 高亮按钮点击事件  
	 * @example <cmd-result-page type="empty"></cmd-result-page>  
	 */
	export default {
		name: 'cmd-result-page',

		props: {
			/**
			 * 图片资源地址，支持相对路径、绝对路径，支持 base64 码
			 */
			src: {
				type: String,
				default: ''
			},
			/**
			 * 主文案
			 */
			text: {
				type: String,
				default: ''
			},
			/**
			 * 副文案
			 */
			subtext: {
				type: String,
				default: ''
			},
			/**
			 * 结果页默认类型empty：页面丢失-lost 网络异常-network 无信息-empty
			 */
			type: {
				type: String,
				default: 'empty'
			},
			/**
			 * 显示普通按钮
			 */
			defBtn:{
				type: String,
				default: ""
			},
			/**
			 * 显示警告按钮
			 */
			warnBtn:{
				type: String,
				default: ""
			},
			/**
			 * 显示高亮按钮
			 */
			priBtn:{
				type: String,
				default: ""
			}
		},

		data() {
			return {
				/**
				 * 默认类型图案
				 */
				typeSrc: {
					network: '',
					lost: '',
					empty: ''
				},
				/**
				 * 默认类型文案
				 */
				typeText: {
					// 网络连接异常
					network: '\u7f51\u7edc\u8fde\u63a5\u5f02\u5e38',
					// 暂无信息
					empty: '\u6682\u65e0\u4fe1\u606f'
				},
				/**
				 * 默认类型副文案
				 */
				typeSubText: {
					// 点击屏幕，重新加载
					network: '\u70b9\u51fb\u5c4f\u5e55\uff0c\u91cd\u65b0\u52a0\u8f7d',
					// 您要访问的页面已丢失
					lost: '\u60a8\u8981\u8bbf\u95ee\u7684\u9875\u9762\u5df2\u4e22\u5931'
				}
			}
		},

		computed: {
			/**
			 * 设置图案
			 */
			setSrc() {
				let src = this.typeSrc[this.type];
				if (this.src) {
					src = this.src;
				}
				return src;
			},
			/**
			 * 设置文案
			 */
			setText() {
				let text = this.typeText[this.type];
				if (this.text) {
					text = this.text;
				}
				return text;
			},
			/**
			 * 设置副文案
			 */
			setSubText() {
				let subText = this.typeSubText[this.type];
				if (this.subtext) {
					subText = this.subtext;
				}
				return subText;
			}
		},
		
		methods:{
			/**
			 * 普通按钮点击事件
			 */
			$_defBtn(e){
				this.$emit('defBtn', e)
			},
			/**
			 * 警告按钮点击事件
			 */
			$_warnBtn(e){
				this.$emit('warnBtn', e)
			},
			/**
			 * 高亮按钮点击事件
			 */
			$_priBtn(e){
				this.$emit('priBtn', e)
			}
		}
	}
</script>

<style>
	.cmd-result-page {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 100%;
		height: 100%;
		text-align: center;
		padding: 40upx 0;
	}

	.cmd-result-page-image {
		width: 280upx;
		height: 280upx;
		margin-bottom: 80upx;
	}

	.cmd-result-page-text {
		line-height: 1;
		color: #111a34;
		font-size: 36upx;
	}

	.cmd-result-page-subtext {
		margin-top: 16upx;
		color: #858b9c;
		font-size: 32upx;
	}

	.cmd-result-page-buttons {
		display: flex;
		flex-direction: row;

		
	}
	.cmd-result-page-buttons .button {
		margin: 10upx;
	}
</style>
